<template>
    <div class='ytjChartReport'>
        <img :src="returnImg" class="returnImg" @click="returns"/>
        <div class='titles2'>
            {{titles}}
        </div>
        <div class='cont1'>
            
             <div class='cont1_item'>
                <img :src="img2"/>
                <div class='cont1_text'>
                    <div class='cont1_text1'>总计资产数</div>
                    <div class='cont1_text2'>95</div>
                </div>
            </div>
            <div class='cont1_item'>
                <img :src="img3"/>
                <div class='cont1_text'>
                    <div class='cont1_text1'>总计合同数</div>
                    <div class='cont1_text2'>75</div>
                </div>
            </div>
            <div class='cont1_item'>
                <img :src="img4"/>
                <div class='cont1_text'>
                    <div class='cont1_text1'>新增合同数</div>
                    <div class='cont1_text2'>5</div>
                </div>
            </div>
            <div class='cont1_item'>
                <img :src="img5"/>
                <div class='cont1_text'>
                    <div class='cont1_text1'>临近合同数</div>
                    <div class='cont1_text2'>15</div>
                </div>
            </div>
        </div>
        <div class='cont2'>
            <div class='cont2_1'>
                <div class='cont2_1_2'>
                    <div class='cont2_title'>
                        租金到期栏目
                    </div>
                    <div class='cont2_table'>
                        <table style='table-layout:fixed;width:100%' >
                            <colgroup>
                                <col/>
                                <col/>
                                <col/>
                            </colgroup>
                            <tr>
                                <td class='th'>合同名称</td>
                                <td class='th'>客户名称</td>
                                <td class='th'>到期日期</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class='cont2_1_3'>
                    <div class='cont2_title'>
                        即将到期合同
                    </div>
                    <div class='cont2_table'>
                        <table style='table-layout:fixed;width:100%' >
                            <colgroup>
                                <col/>
                                <col/>
                                <col/>
                            </colgroup>
                            <tr>
                                <td class='th'>合同名称</td>
                                <td class='th'>客户名称</td>
                                <td class='th'>到期日期</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class='cont2_1_1'></div>
            <div class='cont2_2'>
                <div class='cont2_2_1'>
                    <div class='cont2_2_title'>
                        <img :src="img6"/>数据综合分析
                    </div>
                    <div class='cont2_2_title_1'>
                        近6月新增合同数走势
                    </div>
                    <div class='charts'>
                        <div id="myChart" :style="{width: '100%', height: '100%'}"></div>
                    </div>
                </div>
                <div class='cont2_2_2'>
                    <div class='cont2_2_title'>
                        <img :src="img6"/>合同统计
                    </div>
                     <div class='charts'>
                        <div id="myChart2" :style="{width: '100%', height: '100%'}"></div>
                    </div>
                </div>
                
            </div>
           
        </div>
         <div class='bottoms'>
            </div>
    </div>
</template>
<script>
export default {
    name: 'hello',
    data () {
        return {
            sCode:"",
            titles:"",
            img1:"",
            img2:"",
            img3:"",
            img4:"",
            img5:"",
            img6:"",
            returnImg:""
        }
    },
    created(){
        this.sCode=localStorage.getItem("sCode");
        this.titles= this.$route.query.title;
        this.returnImg=localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+this.sCode+"/return.png";
        this.img1=localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+this.sCode+"/chart1.png";
        this.img2=localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+this.sCode+"/chart2.png";
        this.img3=localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+this.sCode+"/chart3.png";
        this.img4=localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+this.sCode+"/chart4.png";
        this.img5=localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+this.sCode+"/chart5.png";
        this.img6=localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+this.sCode+"/chart6.png";
         try{
             document.getElementsByClassName("ytjChartReport")[0].style.backgroundImage="url('"+localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+this.sCode+"/daping2.jpg')"
        }catch(e){}
        
        var html =document.querySelector('html');
        html.style.fontSize = document.documentElement.clientWidth/10+'px';
    },
    mounted(){
         try{
             document.getElementsByClassName("ytjChartReport")[0].style.backgroundImage="url('"+localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+this.sCode+"/daping2.jpg')"
        }catch(e){}
        this.drawLine();
        this.drawLine2();
    },
    methods: {
        returns(){
            this.$router.go(-1);
        },
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'), null, {renderer: 'svg'})
            // 绘制图表
            myChart.setOption( {
                title: {
                    
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: [ '合同'],
                    
                    textStyle:{
                        fontSize: '0.1rem',//字体大小
                        color: '#ffffff'//字体颜色
                    }
                },
                toolbox: {
                    show: false,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#ffffff',
                                fontSize:'0.1rem'
                            }
                    },
                    data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06']
                },
                yAxis: {
                    type: 'value',
                     axisLabel : {
                        
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                series: [
                    {
                        name: '合同',
                        type: 'line',
                        data: [10, 11, 13, 11, 12, 12],
                        itemStyle: {
                            normal: {
                                color: '#FFFF00', //改变折线点的颜色
                                lineStyle: {
                                    color: '#FFFF00' //改变折线颜色
                                }
                            }
                        },
                    }
                ]
            });
        },
        drawLine2(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart2'), null, {renderer: 'svg'})
            // 绘制图表
            myChart.setOption( {
                title: {
                   
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    textStyle: { //图例文字的样式
                            color: '#fff',
                            fontSize: '0.1rem'
                        },
                },
               
                series: [
                    {
                        name: '资产租赁比率',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 1048, name: '公开拍租'},
                            {value: 735, name: '两委会决定'},
                            {value: 580, name: '市场行情洽谈'}
                        ],
                        "label": {
                            "normal": {
                                "show": true,
                                "textStyle": {
                                    "fontSize": '0.1rem',
                                    color:"#fff"
                                }
                            },
                            "emphasis": {
                                "show": true
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        normal:{
                            textStyle:{
                                color:'#fff',
                                fontSize: '0.1rem'
                            }
                        }
                    }
                ]
            });
        }
    }
    }
</script>
<style scoped>
 .ytjChartReport{
        width:100%;
        height:100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display:flex;
        flex-direction: column;
        align-items:center;

    }
     .returnImg{
        position: absolute;
        right:5%;
        top:5%;
        width:1rem;
        cursor:pointer;
    }
    .titles2{
        height:10%;
        text-align:center;
        width:100%;
        color:#fff;
        font-size:0.25rem;
        font-family: PingFangSC-Regular, PingFang SC;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items:center;
        font-family:"经典圆体繁", "microsoft yahei", "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;;
       
        text-shadow: 0 8px 9px #0f184a, 0px -2px 1px #fff;
        font-weight: bold;
        letter-spacing: 4px;
        text-align: center;
       
    }
    .cont1{
        width:90%;
        border-radius: 15px;
        background:rgba(11, 38, 101, 0.5);
        height:200px;
        margin-top:20px;
        display:flex;
        flex-direction: row;
        align-items:center;
    }
    .cont1_item{
        display:flex;
        flex-direction: row;
        align-items:center;
        width:25%;
        justify-items: center;
        text-align:center;

    }
    .cont1_text1{
        color:#fff;
        font-size:0.12rem;
        font-weight:bold;
    }
    .cont1_text2{
        color:#8499e8;
        font-size:0.12rem;
        font-weight:bold;
    }
    .cont2{
        margin-top:30px;
        flex:1;
        width:90%;
        display:flex;
        flex-direction: row;
    }
    .cont2_1{
        width:35%;
    }
    .cont2_1_1{
        width:20px;
    }
    .cont2_2{
        flex:1;
        border-radius: 15px;
        background:rgba(11, 38, 101, 0.5);
        padding:10px;
        display:flex;
        flex-direction: row;
    }
    .cont2_title{
        width:100%;
        color:#fff;
        margin:10px;
        font-size:0.1rem;
        border-bottom:1px solid #192857;
    }
    .cont2_1_2{
        padding:10px;
        box-sizing: border-box;
        height:50%;
        border-radius: 15px;
        background:rgba(11, 38, 101, 0.5);
    }
    .cont2_1_3{
        margin-top:10px;
        padding:10px;
        box-sizing: border-box;
        height:50%;
        border-radius: 15px;
        background:rgba(11, 38, 101, 0.5);
    }
    .th{
        
        color:#8499e8;
    }
    .bottoms{
        height:50px;
    }
    .cont2_2_title{
        vertical-align: middle;
        color:#fff;
        line-height:40px;
        margin-bottom:20px;
    }
    .cont2_2_title img{
        vertical-align: middle;
        margin-right:10px;
    }
    .cont2_2_title_1{
        
        color:#8499e8;
        margin-top:0.1rem;
        padding-bottom:0.1rem;
    }
    .cont2_2_1{
        height:100%;
        display: flex;
        flex-direction: column;
    }
    .charts{
        flex:1;
    }
    .cont2_2_1{
        width:50%;
    }
    .cont2_2_2{
        width:50%;
        height:100%;
        display: flex;
        flex-direction: column;
    }
    .cont2_table{
        font-size:0.12rem;
    }
    .cont2_2_title{
        font-size:0.1rem;
    }
    .cont2_2_title_1{
        font-size:0.1rem;
    }
</style>